<template>
  <div class="login">
    <div class="loginBox">
      <h2 class="loginH2"><strong>知心购</strong> 后台管理系统</h2>
      <div class="titleDiv">
        <h3>知行合壹</h3>
        <p>以简御繁 知行合壹</p>
        <i class="el-icon-collection-tag"></i>
      </div>
      <el-form
        ref="loginForm"
        status-icon
        :model="Form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="用户名:" prop="username" ref="Form">
          <el-input v-model="Form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            type="password"
            v-model="Form.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="loginHandler('loginForm')"
          >登录</el-button
        >
      </el-form>
    </div>
    <div class="verBox" v-if="isVer">
      <div class="imgVer">
        <verify
          @successverify="successverify"
          @errorverify="errorverify"
        ></verify>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Form, FormItem, Input } from "element-ui";
import verify from "./components/verify.vue";

Vue.use(Button).use(Form).use(FormItem).use(Input);

export default {
  data() {
    return {
      isVer: false,
      loginLoading: false,
      Form: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 15,
            message: "长度须在3到15个字符",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {
    verify,
  },
  methods: {
    // 行为验证失败
    errorverify() {
      console.log("验证失败!");
    },
    // 行为验证成功
    successverify() {
      setTimeout(() => {
        this.isVer = false;
      }, 500);
      this.loginLoading = true;

      // 登录
      // 跳转到首页
      this.loginUser();
    },
    loginHandler(form) {
      console.log("点击了登录");
      this.$refs[form].validate((valid) => {
        if (valid) {
          // console.log("校验通过");
          // 弹出验证码
          this.isVer = true;
          // 传递登录信息
          // this.$http.login(this.Form);
        } else {
          console.log("error 校验未通过");
          return false;
        }
      });
    },
    async loginUser() {
      // 校验通过 发送 登录请求
      // const dataP = this.$http.login(this.ruleForm);
      // dataP.then(res => {
      //   console.log('这是页面调用：', res);
      // }).catch(err => {
      //   console.log(' ------2----',err);
      // })
      /*
            对请求 进行同步处理
            注意： async / await 不会解出错误信息 需要 执行 catch(err=>{})
          
      */
      // 传递用户信息
      const data = await this.$http.login(this.Form);
      // 关闭 loading 效果
      this.loginLoading = false;
      console.log(data);
      if (data) {
        // 保存用户信息
        // this.$store.commit("SET_USERINFO", data.data);
        console.log(this.$store);
        console.log(this.$store.commit);
        this.$store.commit("SET_USERINFO", data.data);
        this.$router.push("/");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.verBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.35);
  .imgVer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 404px;
    height: 360px;
    transform: translate(-50%, -50%);
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  }
}
.login {
  height: 100%;
  width: 100%;
  background: url(../../assets/pageBg/loginBg.jpg) no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
  .loginBox {
    position: relative;
    top: 50%;
    width: 550px;
    margin: 0 auto;
    padding: 15px;
    border: 1px solid #999;
    border-radius: 8px;
    transform: translate(0, -50%);
    background-color: rgb(219, 210, 179);
  }
}
</style>
